<template>
  <div class="employ-wrap">
    <div class="search-box">
      <div class="key-box">
        <img src="../search.png" class="pic1" onclick="return false"/>
        <input class="key" placeholder="请输入姓名或联系方式" v-model="key" maxlength="11"/>
      </div>
      <button type="button" class="search-btn" @click="searchEmploy">搜索</button>
    </div>

    <div class="screen-box">
      <div class="open-box" @click="openModal">
        <img src="../screening.png" class="pic2" onclick="return false"/>
        <span class="all">{{title}}</span>
        <img src="../down.png" class="pic3" onclick="return false"/>
      </div>
    </div>

    <div class="employ-box" ref="wrapper" v-if="showData == 1">
      <div class="employ-list">
        <div class="employ-con" v-for="(item,index) in entryList" :key="index" v-if="entryList.length">
          <div class="employ-info">
            <img :src="item.userUrl" class="pic4" v-if="item.userUrl!='' && item.userUrl!=null" onclick="return false"/>
            <div class="pic4" v-else></div>
            <div class="link-box">
              <span class="name">{{item.userName}}（{{item.workName}}_{{item.postName}}）</span>
              <div class="real-box">
                <span class="real" :class="{'active1':item.isReal==1}">{{item.isReal == 0?"未实名认证":"已实名认证"}}</span><span
                class="num">{{item.userTel}}</span>
              </div>
            </div>

            <span class="temporary-entry" v-if="item.setStatus == 1 && item.status == 0">暂不入职</span>
            <img src="./phone.png" class="pic5" @click="call(item.userTel)" onclick="return false"
                 v-else="item.setStatus == 0"/>
          </div>

          <div class="employ-opt">
            <div class="shield-box" v-if="item.status==0" @click="shield(item.id)">
              <img src="./shielding.png" class="pic6" onclick="return false"/>
              <span class="shield">拉黑</span>
            </div>
            <div class="shield-box" v-else>
              <span class="pass-work">{{item.status | changeStatus}}</span>
            </div>

            <div class="btn-box" v-if="item.status == 0">
              <button type="button" class="btn pass"
                      @click="pass(item.userUrl,item.userName,item.workName,item.postName,item.isReal,item.userTel,item.id)">
                面试通过
              </button>
              <button type="button" class="btn defeated"
                      @click="abandon(item.id,item.userName,item.workName,item.postName,1)">面试失败
              </button>
            </div>
            <div class="btn-box" v-else-if="item.status == 1">
              <button type="button" class="btn pass" @click="entryWork(item.id)">确认入职</button>
              <button type="button" class="btn abandon"
                      @click="abandon(item.id,item.userName,item.workName,item.postName,2)">放弃入职
              </button>
            </div>
          </div>
        </div>

        <div class="more-box" v-show="noMoreData">没有更多了~</div>
      </div>
    </div>

    <div class="empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <div class="img-box"><img src="../empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>

    <div class="screen-modal" v-show="showModal">
      <div class="screen-con">
        <div class="content-sec">
          <div class="sec" @click="queryScreen(-1,'全部')" :class="{'active2':type == -1}">全部
            <img src="../get.png" v-if="type == -1" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(1,'面试已处理')" :class="{'active2':type == 1}">面试已处理
            <img src="../get.png" v-if="type == 1" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(2,'面试未处理')" :class="{'active2':type == 2}">面试未处理
            <img src="../get.png" v-if="type == 2" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(4,'放弃入职')" :class="{'active2':type == 4}">放弃入职
            <img src="../get.png" v-if="type == 4" class="pic7" onclick="return false"/>
          </div>
        </div>
      </div>
    </div>

    <!--放弃入职-->
    <div class="abandon-modal" v-show="showAbandon">
      <div class="abandon-box">
        <div class="abandon-con">
          <div class="abandon-tip">
            是否确定&nbsp;<span class="name">{{name}}（{{workName}}_{{postName}}）</span>{{optTitle}}？
          </div>
        </div>
        <div class="abandon-btn">
          <button class="cancel" type="button" @click="abandonCanacel">取消</button>
          <button class="confirm" type="button" @click="abandonConfirm">确定</button>
        </div>
      </div>
    </div>

    <backpage @backPage="backPage"></backpage>

    <!--员工来源-->
    <div class="source-modal" v-show="showSource" @click="closeSourceModal"></div>
    <div class="source-modal-box" v-show="showSource">
      <span class="source-title">请选择员工来源</span>
      <div class="source-type-select">
        <van-radio-group class="radio-box" v-model="sourceRadio">

          <div class="source-type-select-con1">
            <van-radio name="SS" checked-color="#3cafff" class="sourceSelect" v-if="sourceRadio == 'SS'"
                       :class="{'source-select-active':sourceRadio == 'SS'}" @click="sourceRadio = 'SS'">上势
            </van-radio>
            <span class="source-not-Select" v-else @click="sourceRadio = 'SS'">上势</span>

            <van-radio name="LP" checked-color="#3cafff" class="sourceSelect" v-if="sourceRadio == 'LP'"
                       :class="{'source-select-active':sourceRadio == 'LP'}" @click="sourceRadio = 'LP'">蓝聘
            </van-radio>
            <span class="source-not-Select" v-else @click="sourceRadio = 'LP'">蓝聘</span>
          </div>
          <div>
            <van-radio name="DH" checked-color="#3cafff" class="sourceSelect" v-if="sourceRadio == 'DH'"
                       :class="{'source-select-active':sourceRadio == 'DH'}" @click="sourceRadio = 'DH'">大和
            </van-radio>
            <span class="source-not-Select" v-else @click="sourceRadio = 'DH'">大和</span>

            <van-radio name="DYH" checked-color="#3cafff" class="sourceSelect" v-if="sourceRadio == 'DYH'"
                       :class="{'source-select-active':sourceRadio == 'DYH'}" @click="sourceRadio = 'DYH'">大赢和
            </van-radio>
            <span class="source-not-Select" v-else @click="sourceRadio = 'DYH'">大赢和</span>
          </div>

        </van-radio-group>
      </div>

      <button type="button" class="source-btn" @click="selectSource">确定</button>
    </div>
  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env"
  import BScroll from 'better-scroll'
  import {getDeviceRatio} from "../../../config/util"
  import backpage from "../../../components/backpage"
  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   */
  /*上拉配置*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  }

  export default {
    inject: ['reload'],
    data() {
      return {
        showData: 0,
        userSign: "",
        id: "",
        key: "",
        entryList: [],
        entryScroll: null,
        currentPage: 1,
        PageSize: 20,
        noMoreData: false,
        type: "-1",
        showModal: false,
        title: "全部",
        showAbandon: false,
        name: "",
        workName: "",
        postName: "",
        interviewId: "",
        optTitle: "",
        index: "",
        userRemark: "",
        sourceRadio: "",
        showSource: false,
        entryId: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.id = this.$route.query.id;
      this.queryEntryList();
    },
    methods: {
      queryEntryList(callback) {// 查询入职员工信息
        this.$vux.loading.show({
          text: '加载中',
        });

        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/query_work_order?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/query_work_order?sgin=" + this.userSign + "&mechanismId=" + this.id + "&key=" + this.key + "&status=" + this.type + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.length > 0) {
              this.showData = 1;
              this.entryList = resultObj.data;

              if (callback) {
                callback();
              }
              this.$nextTick(() => {
                this.initScroll();
                this.entryScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.entryScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {
              this.showData = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      queryScreen(index, key) {//根据状态查询
        this.type = index;
        this.title = key;
        this.showModal = false;
        this.currentPage = 1;
        this.PageSize = 20;
        this.queryEntryList(() => {
          this.$nextTick(() => {
            this.entryScroll = null;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      searchEmploy() {//根据条件查询
        this.currentPage = 1;
        this.PageSize = 20;
        this.queryEntryList(() => {
          this.$nextTick(() => {
            this.entryScroll = null;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      pass(pic, name, work, post, real, tel, id) {//面试通过
        if (1 == real) {
          this.name = name;
          this.workName = work;
          this.postName = post;
          this.interviewId = id;
          this.optTitle = "面试通过";
          this.showAbandon = true;
        } else {
          this.$router.push({
            path: "/employpass", query: {
              "userUrl": pic,
              "userName": name,
              "workName": work,
              "postName": post,
              "isReal": real,
              "userTel": tel,
              "id": id,
              "mechanismId": this.id
            }
          })
        }
      },
      shield(id) {//拉黑
        this.$router.push({
          path: "/shield", query: {
            "id": id,
            "mechanismId": this.id
          }
        })
      },
      call(mobile) {//拨号
        window.location.href = 'tel://' + mobile;
      },
      abandon(id, name, work, post, index) {
        this.name = name;
        this.workName = work;
        this.postName = post;
        this.interviewId = id;
        if (index == 1) {
          this.index = 1;
          this.optTitle = "面试失败";
        } else {
          this.index = 2;
          this.optTitle = "放弃入职";
        }
        this.showAbandon = true;
      },
      abandonCanacel() {
        this.showAbandon = false;
      },
      abandonConfirm() {//确定放弃入职
        this.showAbandon = false;
        if (this.index == 1) {
          this.updateWorkStatus(2, this.interviewId, '面试拒绝操作失败，请重试');
        } else if (this.index == 2) {
          this.updateWorkStatus(4, this.interviewId, '放弃入职失败，请重试');
        } else {
          this.interviewPass();
        }
      },
      interviewPass() {//面试通过添加实名信息
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {
          "type": 2,
          "id": this.interviewId
        };

        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/update_work_order?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.post(baseUrl + "/resident/update_work_order?sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {
              this.$vux.toast.text("面试通过操作失败，请重试", "middle");
            } else {
              this.index = "";
              this.currentPage = 1;
              this.PageSize = 20;
              this.queryEntryList(() => {
                this.$nextTick(() => {
                  this.entryScroll = null;
                  this.noMoreData = false;
                  this.initScroll();
                });
              });
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      entryWork(id) {//确定入职
        this.entryId = id;
        this.showSource = true;
      },
      openModal() {//打开筛选
        this.showModal = true;
      },
      updateWorkStatus(status, id, msg) {//修改面试预约状态
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {
          "type": 1,
          "status": status,
          "id": id
        };

        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/update_work_order?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.post(baseUrl + "/resident/update_work_order?sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {
              this.$vux.toast.text(msg, "middle");
            } else {
              this.index = "";
              this.currentPage = 1;
              this.PageSize = 20;
              this.queryEntryList(() => {
                this.$nextTick(() => {
                  this.entryScroll = null;
                  this.noMoreData = false;
                  this.initScroll();
                });
              });
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      backPage() {
        this.$router.push({path: "/residentIndex"});
      },
      selectSource() {//选择来源
        if (!this.sourceRadio) {
          this.$vux.toast.text("请选择员工来源", "middle");
          return;
        }

        this.$vux.loading.show({
          text: '加载中',
        });

        let data = {
          "type": 3,
          "id": this.entryId,
          "userRemark": this.sourceRadio
        };

        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/update_work_order?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.post(baseUrl + "/resident/update_work_order?sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {
              this.$vux.toast.text('确定入职失败，请重试', "middle");
            } else {
              this.showSource = false;
              this.currentPage = 1;
              this.PageSize = 20;
              this.queryEntryList(() => {
                this.$nextTick(() => {
                  this.entryScroll = null;
                  this.noMoreData = false;
                  this.initScroll();
                });
              });
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      closeSourceModal() {
        this.showSource = false;
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let time = (new Date()).getTime();
          let url = baseUrl + "/resident/query_work_order?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          setTimeout(() => {
            this.axios.get(baseUrl + "/resident/query_work_order?sgin=" + this.userSign + "&mechanismId=" + this.id + "&key=" + this.key + "&status=" + this.type + "&page=" + (++this.currentPage) + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0) {
                if (resultObj.data.length > 0) {
                  this.entryList = this.entryList.concat(resultObj.data);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      initScroll() {//初始化BScroll
        if (!this.entryScroll) {
          this.entryScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.entryScroll.refresh();
        }
      },
      enable() {
        this.entryScroll && this.entryScroll.enable()
      },
      refresh() {
        this.entryScroll && this.entryScroll.refresh()
      },
      finishPullUp() {
        this.entryScroll && this.entryScroll.finishPullUp()
      }
    },
    filters: {
      changeStatus(status) {
        if (status == 1) {
          return "面试通过";
        } else if (status == 2) {
          return "面试失败";
        } else if (status == 3) {
          return "已经招满";
        } else if (status == 4) {
          return "放弃入职";
        } else {
          return "入职成功";
        }
      }
    },
    watch: {
      entryList() {
        this.$nextTick(() => {
          this.entryScroll.refresh();
        })
      }
    },
    components: {
      BScroll,
      backpage
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .employ-wrap
    wh(100%, auto)
    background: rgba(242, 242, 242, 1)
    .search-box
      display flex
      align-items: center
      wh(100%, 1.2rem)
      background: $color
      .key-box
        display: flex
        align-items: center
        margin-left: 3.2%
        wh(73.07%, 0.8rem)
        background: rgba(255, 255, 255, 1)
        border-radius(0.4rem)
        .pic1
          margin-left: 0.253rem
          margin-right: 0.253rem
          wh(0.533rem, 0.533rem)
        .key
          width: 80%
          height: 0.5rem
          line-height: 0.5rem
          size-color(0.4rem, rgba(204, 204, 204, 1))
      .search-btn
        margin-left: auto
        margin-right: 3.33%
        wh(1.44rem, 0.72rem)
        line-height: 0.72rem
        border: 0.027rem solid rgba(255, 255, 255, 1)
        border-radius(0.16rem)
        size-color(0.4rem, rgba(255, 255, 255, 1))
        background: rgba(60, 175, 255, 1)
        text-align: center
    .screen-box
      display: flex
      align-items: center
      wh(100%, 0.8rem)
      .open-box
        display: flex
        align-items: center
        wh(auto, 0.8rem)
        margin-left: 2.93%
        .pic2
          margin-right: 0.173rem
          wh(0.48rem, 0.48rem)
        .all
          size-color(0.373rem, rgba(102, 102, 102, 1))
          margin-right: 0.12rem
        .pic3
          wh(0.32rem, 0.32rem)
    .employ-box
      position: fixed
      top: 2rem
      wh(100%, auto)
      bottom: 0
      z-index: 88
      overflow: hidden
      background: rgba(242, 242, 242, 1)
      .employ-list
        display: flex
        flex-direction: column
        wh(100%, auto)
        .employ-con
          display: flex
          flex-direction: column
          wh(100%, 3.093rem)
          background: rgba(255, 255, 255, 1)
          border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
          .employ-info
            display: flex
            align-items: center
            position: relative
            margin-top: 0.373rem
            margin-left: 3.2%
            margin-right: 3.6%
            margin-bottom: 0.32rem
            wh(auto, 1.387rem)
            .pic4
              margin-right: 0.293rem
              wh(1.387rem, 1.387rem)
              background: rgba(242, 242, 242, 1)
              border-radius(50%)
              box-sizing: border-box
            .link-box
              display: flex
              flex-direction: column
              .name
                size-color(0.453rem, rgba(51, 51, 51, 1))
                margin-bottom: 0.133rem
              .real-box
                margin-top: 0.133rem
                .real
                  margin-right: 0.267rem
                  size-color(0.373rem, rgba(255, 187, 76, 1))
                .active1
                  color: $color
                .num
                  size-color(0.373rem, rgba(102, 102, 102, 1))
            .pic5
              position: absolute
              right: 0
              top: 0.107rem
              wh(0.533rem, 0.533rem)
            .temporary-entry
              position: absolute
              right: 0
              top: 0.107rem
              size-color(0.373rem, #999)
              text-decoration: underline
          .employ-opt
            display: flex
            align-items: center
            margin-left: 3.2%
            margin-right: 3.6%
            wh(auto, 0.64rem)
            .shield-box
              display: flex
              align-items: center
              .pic6
                wh(0.4rem, 0.4rem)
                margin-right: 0.147rem
              .shield
                size-color(0.373rem, rgba(102, 102, 102, 1))
              .pass-work
                size-color(0.347rem, rgba(204, 204, 204, 1))
            .btn-box
              margin-left: auto
              .btn
                text-align: center
                wh(1.92rem, 0.64rem)
                border-radius(0.32rem)
                background: #FFF
                line-height: 0.64rem
                font-size: 0.347rem
              .pass
                margin-right: 0.2rem
                border: 0.027rem solid rgba(60, 175, 255, 1)
                color: rgba(60, 175, 255, 1)
              .defeated
                border: 0.027rem solid rgba(255, 83, 83, 1)
                color: rgba(255, 83, 83, 1)
              .abandon
                border: 0.027rem solid rgba(128, 128, 128, 1)
                color: rgba(128, 128, 128, 1)
        .more-box
          text-align: center
          margin-top: 0.64rem
          padding-bottom: 0.8rem
          size-color(0.373rem, rgba(153, 153, 153, 1))
    .screen-modal
      position: fixed
      top: 2rem
      left: 0
      right: 0
      bottom: 0
      z-index: 99
      background-color: rgba(0, 0, 0, 0.5)
      .screen-con
        wh(100%, 4.8rem)
        background: #FFF
        .content-sec
          display: flex
          flex-direction: column
          wh(auto, 100%)
          margin-left: 0.48rem
          margin-right: 0.507rem
          .sec
            display: flex
            align-items: center
            height: 1.067rem
            line-height: 1.067rem
            size-color(0.427rem, rgba(102, 102, 102, 1))
            &:nth-child(1)
              margin-top: 0.267rem
          .active2
            color: $color
          .pic7
            margin-left: auto
            wh(0.64rem, 0.64rem)
    .empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 2rem
      left: 0
      right: 0
      bottom: 0
      z-index: -1
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
    .abandon-modal
      modal(fixed, 100, 0.5)
      .abandon-box
        wh(7.2rem, 4rem)
        background: rgba(255, 255, 255, 1)
        border-radius(0.16rem)
        .abandon-con
          fj(center, center)
          margin: 0 auto
          wh(5.44rem, 2.813rem)
          .abandon-tip
            size-color(0.427rem, rgba(51, 51, 51, 1))
            line-height: 0.64rem
          .name
            color: $color
        .abandon-btn
          fj(center, center)
          wh(100%, 1.173rem)
          border-top: 0.027rem solid rgba(230, 230, 230, 1)
          .cancel
            flex: 1
            height: 1.173rem
            border-bottom-left-radius: 0.16rem
            size-color(0.44rem, rgba(153, 153, 153, 1))
            background: #FFF
            border-right: 0.027rem solid rgba(230, 230, 230, 1)
          .confirm
            flex: 1
            height: 1.173rem
            border-bottom-right-radius: 0.16rem
            size-color(0.44rem, $color)
            background: #FFF
    .source-modal
      modal(fixed, 100, 0.5)
    .source-modal-box
      position: fixed
      top: 4.64rem
      left: 0
      right: 0
      margin: auto
      z-index: 100
      wh(8rem, 5.92rem)
      background: rgba(255, 255, 255, 1)
      border-radius(0.16rem)
      .source-title
        display: flex
        justify-content: center
        padding-top: 0.64rem
        padding-bottom: 0.64rem
        size-color(0.48rem, rgba(51, 51, 51, 1))
        font-weight: 500
      .source-type-select
        margin-left: 0.533rem
        margin-right: 0.533rem
        size-color(0.427rem, rgba(153, 153, 153, 1))
        .radio-box
          display: flex
          .source-type-select-con1
            margin-right: 0.21rem
          .sourceSelect
            fj(center, center)
            margin-left: 0
            wh(3.307rem, 0.96rem)
            margin-bottom :0.24rem
            border: 0.027rem solid rgba(204, 204, 204, 1)
            border-radius: 0.16rem
          .source-select-active
            border: 0.027rem solid rgba(60, 175, 255, 1)
          .source-select-active >>> .van-radio__label
            color: rgba(60, 175, 255, 1)
          .source-not-Select
            display: block
            text-align: center
            line-height: 0.96rem
            wh(3.307rem, 0.96rem)
            margin-bottom :0.24rem
            border: 0.027rem solid rgba(204, 204, 204, 1)
            border-radius: 0.16rem
      .source-btn
        display: flex
        justify-content: center
        margin: 0 auto
        margin-top: 0.2rem
        wh(6.933rem, 1.067rem)
        background: rgba(60, 175, 255, 1)
        border-radius: 0.16rem
        size-color(0.453rem, rgba(255, 255, 255, 1))
</style>
